import React from 'react'
import { Form, Input, Button, DatePicker } from 'antd'
import '../batchRecord/search.css'
import { disabledStartDate, disabledEndDate } from '../batchRecord/Search'

const FormItem = Form.Item

const WhiteListSearch = (props) => {
  const { getFieldDecorator } = props.form

  const inputLayout = { style: { width: 120 }}

  const {
    phone,
    startTime,
    endTime,
    onChangePhone,
    onChangeStartTime,
    onChangeEndTime,
    onSearch,
    onAdd
  } = props

  return (
    <Form layout="inline" style={{padding: 24}}>
      <FormItem label="号码">
        <Input {...inputLayout} placeholder="号码" value={phone} onChange={onChangePhone} />
      </FormItem>
      <FormItem label="开始时间">
        <DatePicker {...inputLayout} defaultValue={startTime} onChange={onChangeStartTime} disabledDate={disabledStartDate.bind(null, endTime)} />
      </FormItem>
      <FormItem label="结束时间">
        <DatePicker {...inputLayout} defaultValue={endTime} onChange={onChangeEndTime} disabledDate={disabledEndDate.bind(null, startTime)} />
      </FormItem>
      <FormItem>
        <Button type="primary" onClick={onSearch}>查询</Button>
      </FormItem>
      <FormItem>
        <Button type="primary" onClick={onAdd}>添加</Button>
      </FormItem>
    </Form>
  )
}

export default Form.create()(WhiteListSearch)